<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改昵称</title>
    <link href="/user/css/my.css" rel="stylesheet">
    <link href="/index/css/bootstrap.min.css" rel="stylesheet">
    <script src="/index/js/jquery-1.7.2.js"></script>
    <style type="text/css">
        .center-in-center{
            position: absolute;
            top: 40%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        input{
            width: 320px;
        }
        .button{
            display:block;
            margin:0 auto;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(".btn").click(function () {
                $(this).prop("disabled",true);
                let s = $("#nickname").val();
                s = s.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
                if(s.length < 2 || s.length > 12){
                    $("#error").html("<div class=\"alert alert-warning\" role=\"alert\"><strong>长度不合法</strong>&nbsp;&nbsp;昵称长度需介于 2 ~ 12 之间</div>");
                }else{
                    $("#error").html("");
                    $.post("/safety/changeNickname","nickname=" + s,function (msg) {
                        if(msg == "isExist") $("#error").html("<div class=\"alert alert-warning\" role=\"alert\"><strong>昵称已存在</strong></div>");
                        else if(msg == "isOk") window.top.location.reload();
                    }).error(function () {
                        window.top.location.href = "/500";
                    });
                }
                setTimeout(function () {
                    $(".btn").prop("disabled",false);
                },1200);
            });
        });
    </script>
</head>
<body class="center-in-center" style="background-color: whitesmoke">
<div id="error"></div>
<p><input id="nickname" type="text" placeholder="请输入新的昵称"></p>
<p><button class="button btn btn-info btn-md" role="button">更改昵称</button></p>
</body>
</html>